import { useEffect, useRef } from 'react'
import ImageList from '@/modules/imageList'

import Macy from 'macy'

export default function Waterfall() {
  // 定义一个ref对象
  // wrapRef.current
  // 默认需要赋值为null,否则后续在做一些判断时不方便
  const wrapRef = useRef<HTMLDivElement>(null)

  // ref必须在组件渲染完成后使用
  useEffect(() => {
    if (!wrapRef.current) {
      return
    }

    new Macy({
      container: wrapRef.current, // 图片的容器
      trueOrder: false,
      waitForImages: false,
      useOwnImageLoader: false,
      debug: true,
      mobileFirst: true,
      columns: 1, // 默认1列
      margin: {
        y: 10,
        x: 10,
      },
      breakAt: {
        1200: 6, // 屏宽大于1200展示6列
        940: 5, // 屏宽大于940展示5列
        520: 3, // 屏宽大于520展示3列
        400: 2, // 屏宽大于400展示2列
      },
    })
  }, [])

  // 如果需要获取某个Div..我们需要给这个div加个属性叫ref
  // 然后让这个ref=我们定义好的useRef对象即可
  return (
    <div ref={wrapRef}>
      {ImageList.map((item: any, index: number) => (
        <div key={item.id}>
          <img style={{ width: '100%' }} src={item.image} alt="" />
          {index + 1}
        </div>
      ))}
    </div>
  )
}
